<template>
	<view>
		<view class="smart-panel-head">
			<view class="smart-panel-head-title">text 文本组件</view>
		</view>
		<view class="smart-padding-wrap">
			<view class="text-box" scroll-y="true">
				<text>{{ text }}</text>
			</view>
			<button type="primary" :disabled="!canAdd" @click="add">add line</button>
			<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            texts: [
                'HBuilder, 400万开发者选择的IDE',
                'HBuilderX, 轻巧、极速、极客编辑器',
                'uni-app, 终极跨平台方案',
                'HBuilder, 400万开发者选择的IDE',
                'HBuilderX, 轻巧、极速、极客编辑器',
                'uni-app, 终极跨平台方案',
                '...更多内容循环显示...'
            ],
            text: '', 
            canAdd: true,
            canRemove: false, 
            extraLine: []
        };
    },
    methods: {
        add: function(e) {
            this.extraLine.push(this.texts[this.extraLine.length %12]);
            this.text = this.extraLine.join('\n');
            this.canAdd = this.extraLine.length <12;
            this.canRemove = this.extraLine.length > 0;
        },
        remove: function(e) {
            if (this.extraLine.length > 0) {
                this.extraLine.pop();
                this.text = this.extraLine.join('\n') 
                this.canAdd = this.extraLine.length < 12;
                this.canRemove = this.extraLine.length > 0;
            }
        }
    }
};
</script>

<style>

</style>
